<script lang="ts" setup name="testEcharts">
import * as echarts from 'echarts';
import Charts from 'vue-echarts';

const data = ref([
  { product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7 },
  { product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1 },
  { product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5 },
  { product: 'Walnut Brownie1', '2015': 72.4, '2016': 53.9, '2017': 39.1 }
]);

const option = ref<echarts.EChartsOption>({
  title: {
    text: '主标题'
  },
  legend: {},
  tooltip: {},
  toolbox: {
    feature: {
      dataView: {},
      saveAsImage: {}
    }
  },
  dataset: {
    dimensions: ['product', '2015', '2016'],
    source: data.value
  },
  xAxis: { type: 'category' },
  yAxis: {},
  // series: [{ type: 'bar' }]
  series: [{ type: 'line' }, { type: 'bar' }]
});
</script>
<template>
  <Charts :option="option" autoresize />
</template>
<style lang="scss" scoped></style>
